
// Node.ELEMENT_NODE 判断节点类型的枚举类 在ie中无效(2017年12月25日11:33:51 测试在ie中有效) ie中可以直接用对应数字判断

function getNodeName(elementNode) {
    if(elementNode.nodeType==Node.ELEMENT_NODE){
        return elementNode.nodeName;
    }
    return "";
}

function addElement() {
    var ele = document.createElement('p');
    ele.innerHTML = "通过按钮添加的";
    document.body.appendChild(ele);
}

var ele = document.getElementById('hello');

/*

ele.previousSibling; 上一个同胞元素
ele.nextSibling; //下一个同胞元素
ele.hasChildNodes(); //是否有子元素
ele.firstChild
ele.lastChild

*/
var nodeName = getNodeName(ele);
console.log('nodeName=',nodeName);

//操作节点

//--创建节点 
var spanNode = document.createElement('span');
spanNode.innerHTML = '子节点';
//插入节点
ele.appendChild(spanNode); //追加节点 node 会变成ele的子节点

//在某节点之前插入节点
var pNode = document.createElement('p');
pNode.innerHTML = "我是段落节点";
ele.insertBefore(pNode,spanNode); // 在 spanNode 之前插入 pNode

//替换节点
var newP=document.createElement("p");
newP.innerHTML = "这是新的段落";
ele.replaceChild(newP,pNode);

//深度复制节点内容
var eleCopy = ele.cloneNode(true);
var body = document.body.appendChild(eleCopy); //直接访问body元素

// <html> 元素
var htmlEle = document.documentElement;
console.log('htmlEle.nodeName',htmlEle.nodeName);

// <!DOCTYPE> 
var docType = document.doctype;
console.log('docType=',docType);

//查找元素

var pCollects = document.getElementsByTagName("p"); //返回页面中所有标签名为p的元素列表

console.log('pCollects=',pCollects);

//获取文档的所有元素

var allEles = document.getElementsByName("*");

var myDiv = document.getElementById("areaId");
var myStyle = myDiv.style; // CSSStyleDeclaration 对象

console.log('myStyle=',myStyle);

//设置和获取属性的值
var myId = myDiv.getAttribute('id');

myDiv.setAttribute('class','mycls');

// 通过 attributes 操作属性
//获取属性的值
var clsVal = myDiv.attributes['class'].nodeValue;
var myClsAttrNode = myDiv.attributes.getNamedItem('class');
clsVal = myClsAttrNode.nodeValue;
/*
myClsAttrNode.specified
每个特性节点都有一个名为specified 的属性，这个属性的值如果为true，则意味着要么是在HTML 中指
定了相应特性，要么是通过setAttribute()方法设置了该特性
在IE 中，所有未设置过的特性的该
属性值都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点（因此，在这些浏览器
中，任何特性节点的specified 值始终为true）。
*/
console.log("myDiv.attributes clsVal=",clsVal,'myClsAttrNode=',myClsAttrNode.specified);

//动态加载脚本

function loadScript(url) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
    return script;
}

function loadScriptString(scriptStr) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(scriptStr)); //非ie
    } catch (ex) {
        script.text = scriptStr; //ie
    }
}